<template>
	<view class="content">
		<view class="login_top">
		</view>
		<view class="" style="position: sticky;top: 0;z-index: 99;margin-top: -400rpx;" :style="`${scrollTop};`">
			<view class="" :style="'height: '+statusBarHeight+'px;'">
			</view>
			<view class="hometext" style="display: flex;justify-content: center;align-items: center;">
				首页
			</view>
		</view>
		<view class="image1">
			<u-swiper style="height: 240rpx;border-radius: 20rpx;" :list="imageList" keyName="src"
				@change="e => current = e.current" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in imageList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 通知 -->
		<view class="inform">
			<view class="inform-info">
				<view class="picture" @click="jump(`/pageA/noticeList/noticeList?type=0&name=公告`)">
					<view class="picture_left">
						<image src="../../static/news.png" mode=""></image>
						<!-- <view class="line"></view> -->
					</view>
				</view>
				<view class="info">
					<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true"
						:interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in newsList" :key="index">
							<view class="swiper-item" @click="jump(`/pageA/noticeList/noticeList?type=0&name=公告`)">
								<text class="one-omit">{{item.title}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- <view class="navlist flex_between">
			<image :src="$fun.imgUrl(item.image)" v-for="(item,index) in category" :key="index" @click="jump(item.url)"
				mode=""></image>
		</view> -->
		<view class="business">增值服务包</view>
		<view class="businesslist">
			<view class="listitem" v-for="(item,index) in product" :key="index">
				<image :lazy-load='true' :src="$fun.imgUrl(item.image)" mode=""></image>
				<view class="right">
					<view class="name">{{item.name}}</view>
					<view class="text">{{item.title}}</view>
					<view class="flex" style="margin-top: 16rpx;">
						<view class="money"><span>￥</span>{{item.money}}</view>
						<view class="money1" v-if="item.zsjf">送增值服务包{{item.zsjf}}</view>
					</view>
					<view class="btn">
						<!-- <view class="btn1" @click="$fun.jump(`./businessHtml?id=${item.id}`)">查看教程</view> -->
						<view class="btn2" @click="$fun.jump(`/pages/shop/shopdetail?id=${item.id}&from=product`)">
							立即购买</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="business">积分商城</view> -->
		<view class="">
			<u-tabs style="margin-left: 10rpx;font-size: 32rpx;" :inactiveStyle="{color: '#999999' }" :list="tabList"
				lineColor='#FF5634' :current="tabIndex" lineHeight='4' lineWidth='18' @click="changeTab"></u-tabs>
		</view>
		<view class="shoplist">
			<view class="shoplist_goods" v-for="(item,index) in shoplist" :key="index"
				@click="$fun.jump(`/pages/shop/shopdetail?id=${item.id}&from=`)">
				<image :src="$fun.imgUrl(item.image)" mode=""></image>
				<view class="text">{{item.name}}</view>
				<view class="num"> <text style="font-size: 22rpx;">￥</text>{{item.money}} </view>
			</view>
		</view>
		<appUpdate v-if="appUpdateShow" :update_info="update_info" @closeModel="closeModel"></appUpdate>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update.vue";
	import {
		checkUpdate
	} from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		components: {
			appUpdate
		},
		data() {
			return {
				title: 'Hello',
				tabList: [],
				tabIndex: 0,
				imageList: [],
				newsList: [{
					title: ''
				}],
				product: '',
				current: 0,
				category: [],
				appUpdateShow: false,
				shoplist: [],
				scrollTop: '',
				statusBarHeight: 0,
				id: ''
			}
		},
		onShow() {
			this.$fun.ajax.post('index/index', {}).then(res => {
				// console.log(res)
				this.newsList = res.data.news
			})
			this.$fun.ajax.post('index/hot', {}).then(res => {
				this.product = res.data
			})
			this.getShopList(this.id)
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			// #ifdef APP-PLUS
			this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
			// #endif
			this.$fun.ajax.post('index/advert', {}).then(res => {
				let imgList = res.data
				for (var i = 0; i < imgList.length; i++) {
					imgList[i].src = this.$fun.imgUrl(imgList[i].image)
				}
				this.imageList = imgList
			})
			this.$fun.ajax.post('index/goodstype', {}).then(res => {
				this.tabList = res.data
				this.id = res.data[0].id
			})
		},
		onPageScroll(e) {
			// e.scrollTop 表示当前页面滚动的距离
			// console.log('页面滚动距离：', e.scrollTop);
			// 在这里编写你的滚动相关逻辑
			if (e.scrollTop > 0) {
				this.scrollTop = "background: #F6D0D0;"
			}

		},
		methods: {
			changeTab(res) {
				console.log(res)
				this.tabIndex = res.index
				this.keyword = ''
				this.id = res.id
				this.getShopList(res.id)
			},
			getShopList(id) {
				this.$fun.ajax.post('index/type_goods', {
					type: id
				}).then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.shoplist = res.data
				})
			},
			jump(url) {
				this.$fun.jump(url)
			},
			closeModel() {
				this.appUpdateShow = false
			},
			getAppInfo(type) {
				const that = this
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false

				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

				//请求获取最新版本
				plus.runtime.getProperty(plus.runtime.appid, (result) => {
					that.$fun.ajax.post('config/version', {
						version: result.version
					}).then(res => {
						that.update_info = {
							version: res.data.version, //线上版本
							now_url: res.data.pkgUrl, //更新链接
							silent: res.data.silent, //是否是静默更新
							force: res.data.force, //是否是强制更新
							net_check: res.data.net_check, //非WIfi是否提示
							note: res.data.content, //更新内容
						}
						checkUpdate(that.update_info, type, that).then(res => {
							if (res.data) {
								that.appUpdateShow = true
							} else {
								// this.$fun.msg(res.msg)
							}
						}); ///检查更新  
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					})
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2EDED;
	}

	.login_top {
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(180deg, rgba(255, 153, 153, 0.5) 0%, rgba(255, 153, 153, 0) 100%);
	}

	.hometext {
		width: 750rpx;
		height: 88rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #19181A;
		padding: 15rpx 30rpx 16rpx;
		// position: sticky;
		// top: 0;
		// z-index: 1;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				width: 40rpx;
				height: 12rpx;
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.content {


		.inform {
			// margin-top: 30rpx;

			.inform-info {
				display: flex;
				padding: 0 20rpx;
				width: 690rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 0 auto;

				.picture {
					display: flex;
					align-items: center;
					margin-right: 30rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}

					&_left {
						display: flex;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						.line {
							width: 2rpx;
							height: 20rpx;
							background: #999999;
							border-radius: 2rpx;
							margin-left: 18rpx;
						}
					}
				}

				.info {
					width: 80%;
					height: 100%;

					.swiper {
						width: 100%;
						height: 100%;

						.swiper-item {
							display: flex;
							align-items: center;
							width: 500rpx;
							height: 100%;
							overflow: hidden;
							flex-wrap: nowrap;
							text-overflow: ellipsis;

							text {
								font-size: 24rpx;
								color: #333333;

							}
						}
					}
				}
			}
		}

		.image1 {
			width: 690rpx;
			height: 240rpx;
			background: #D8D8D8;
			border-radius: 16rpx;
			margin: 20rpx auto 30rpx;
		}

		.navlist {
			width: 690rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			margin: 30rpx auto;

			image {
				width: 140rpx;
				height: 100rpx;
			}
		}

		.business {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			margin: 0rpx 30rpx 30rpx;
			padding-top: 20rpx;
		}

		.businesslist {

			.listitem {
				width: 690rpx;
				height: 252rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: 0 auto 30rpx;
				padding: 20rpx;
				display: flex;

				image {
					width: 140rpx;
					height: 140rpx;
				}



				.right {
					margin-left: 16rpx;
					width: 494rpx;

					.money {
						font-weight: 600;
						font-size: 32rpx;
						color: #ED4961;

						span {
							font-size: 22rpx;
						}
					}

					.money1 {
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						margin-left: 10rpx;
					}

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						width: 418rpx;
						margin-top: 10rpx;
						height: 30rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.btn {
						display: flex;
						justify-content: flex-end;
						margin-top: 10rpx;

						.btn1 {
							width: 180rpx;
							height: 64rpx;
							background: #DBE7FF;
							border-radius: 32rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #4D88FF;
							line-height: 64rpx;
							text-align: center;
						}

						.btn2 {
							width: 180rpx;
							height: 64rpx;
							background: #FF5534;
							border-radius: 32rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 64rpx;
							text-align: center;
							margin-left: 30rpx;
						}
					}
				}
			}
		}
	}

	.shoplist {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		&_goods {
			width: 336rpx;
			height: 426rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;

			image {
				width: 296rpx;
				height: 296rpx;
				border-radius: 16rpx;
			}

			.text {
				width: 296rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin: 10rpx 0 0rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.num {
				font-weight: 600;
				font-size: 32rpx;
				color: #ED4961;
			}
		}
	}
</style>